﻿@model WebMenuAddViewModel


@{
    ViewBag.Title = "";
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Add</title>
</head>
<body>

    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-headline">
                <div class="panel-heading">
                    <h2 class="panel-title">添加前台菜单</h2>
                </div>

                <div class="panel-body">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-8">
                                <form method="post">
                                    <div class="form-group">
                                        <label for="Title">菜单名称:</label>
                                        @Html.TextBoxFor(wm => wm.Title,new {@case="form-control"})
                                        <span>
                                            @Html.ValidationMessageFor(wm => wm.Title)
                                        </span>
                                    </div>

                                    <div class="form-group">
                                        <label for="Title">菜单链接:</label>
                                        @Html.TextBoxFor(wm => wm.Link,new {@case="form-control"})
                                        <span>
                                            @Html.ValidationMessageFor(wm => wm.Link)
                                        </span>
                                    </div>

                                    <div class="form-group">
                                        <label for="Icon">Icon:</label>
                                        @Html.TextBoxFor(wm => wm.Icon,new {@case="form-control"})
                                        <span>
                                            @Html.ValidationMessageFor(wm => wm.Icon)
                                        </span>
                                    </div>

                                    <div class="form-group">
                                        <label for="Title"></label>
                                        <select id="FirstMenu" name="ParentList" class="form-control">
                                            <option value="1">一级菜单</option>
                                            <option value="2">二级菜单</option>
                                            <option value="3">三级菜单</option>
                                        </select>
                                        <br/>
                                        <select id="secondMenu" class="form-control" name="ParentList" style="display:none;"></select><br/>
                                        <select id="thirdMenu" class="form-control" name="ParentList" style="display:none;"></select>

                                    </div>


                                    <div class="form-group">
                                        <button class="btn btn-primary">提交</button>
                                    </div>

                                </form>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    @section Scripts
    {
        <script>

            $(function(){
                
                $("#FirstMenu").change(function()
                {
                    
                    if($(this).val() == "2")
                    {
                        $("#secondMenu").show();
                        $("#thirdMenu").hide();

                        $.get("../../ForumManage/WebMenu/GetSysMenuList",function(data){
                            console.log(data);
                            var str="";
                            for(let i = 0; i < data.length; i++)
                            {
                                str += "<option value='"+ data[i].id +"'>"+ data[i].title +"</option>";
                            }

                            $("#secondMenu").html(str);

                        },"json");
                    }
                    else if($(this).val() == "3"){
                        $("#secondMenu").show();
                        $("#thirdMenu").show();
                        $.get("../../ForumManage/WebMenu/GetSysMenuList",function(data){
                             //用户得到所有的一级菜单值,并且把这个值存放到secondMenu下拉列表当中
                             //我们需要把data当中的内容绑定到对应的下拉列表当中
                             let str ="";
                             for(let i = 0 ; i < data.length;i++)
                             {
                                str +="<option value='"+data[i].id+"'>"+data[i].title+"</option>";
                             }

                             $("#secondMenu").html(str);

                             $.get("../../ForumManage/WebMenu/GetSysMenuList",{parentId:$("#secondMenu").val()},function(data){
                                let ddstr = "";
                                 for(let i = 0 ; i < data.length;i++)
                                 {
                                    ddstr +="<option value='"+data[i].id+"'>"+data[i].title+"</option>";
                                 }
                                 $("#thirdMenu").html(ddstr);

                       
                                },"json")

                        },"json"); 
                    }
                    else
                    {
                        $("#secondMenu").hide();
                        $("#thirdMenu").hide();
                    }
                });
            });

            $("#secondMenu").change(function(){

             if($("#firstMenu").val() == "3")
             {
                    $.get("../../ForumManage/WebMenu/GetSysMenuList",{parentId:$("#secondMenu").val()},function(data)
                    {
                     let ddstr = "";
                     for(let i = 0 ; i < data.length;i++)
                     {
                     ddstr +="<option value='"+data[i].id+"'>"+data[i].title+"</option>";
                     }
                     $("#thirdMenu").html(ddstr);
                });
             }   
        });

        </script>
        
    }

</body>
</html>
